<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>我的订单</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript" src="${ctxStatic }/js/hidden_nav.js"></script>
		<link href="${ctxStatic}/jquery-pagination/pagination.css" rel="stylesheet" />
		<script type="text/javascript" src="${ctxStatic }/jquery-pagination/jquery-pagination.js"></script>
		<script type="text/javascript">
				var pagenum=parseInt("${pageNo-1}");
				var pagesize=parseInt("${pageSize}");
				var totalCount=parseInt("${count}");
			    $(function(){
					// 创建分页元素				
					$("#Pagination").pagination(totalCount, {
						num_edge_entries: 2,
						current_page: pagenum,
						items_per_page: pagesize,
						num_display_entries: pagesize,
						prev_text: "上一页",
						next_text:"下一页",
						num_display_entries: 8,
						callback: pageselectCallback  //回调函数
					});
			    });
			    
				function pageselectCallback(page_id, jq){
					$("#pageNo").val(page_id+1);
					$("#pageForm").submit();			
				}
			    
	    </script>		
	</head>
<body>

<div>
	<div class="nav_hidden">
		<div class="nav_center">
	    	<div class="headnav">
	        	<span>全部药品分类</span>
	            <p></p>
	            <div class="nav_hid" style=" display:none;">
	                <div class="subhid">
	                	<h3>中成药</h3>
	                    <ul class="cathid">
	                    	<li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                   		<li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                    </ul>
	                </div>
	                <div class="subhid">
	                	<h3>医疗器械</h3>
	                    <ul class="cathid">
	                    	<li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                        <li class="cathidden">
	                        	<a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                            <a class="x_3" href="#">心脑血管</a>
	                        </li>
	                    </ul>
	                </div>
	            </div>
	        </div>
	    </div>
	</div> 
	<div class="col_main">
		<div class="dingdantit">
	    	<h2 class="dingdantit01">首页</h2>
	        >
	        <h3 class="dingdantit02">我的订单</h3>
	    </div>
	    <div class="dingdanbox">
	    	<form id="queryForm" name="queryForm" action="${ctx}/myorder" method="post">
	    	<h3>订单查询</h3>
	        <div class="dd_content">
	            <label class="dd_time">
	                <span>订单时间</span>
	                <span>
	                    <span>
							<input id="startDate" name="startDate" value="${order.startDate}" type="text"  onclick="WdatePicker({isShowClear:true,readOnly:true,dateFmt:'yyyy-MM-dd'})" class="Wdate" style="border-width:1px;border-style:solid;border-color:#BFBFBF;height:28px;padding:0 5px;width:150px;"/>                    
	                    </span>
	                </span>
	                <span>至</span>
	                <span>
	                    <input id="endDate" name="endDate" type="text" value="${order.endDate}"  onclick="WdatePicker({isShowToday:true,isShowClear:true,readOnly:true,dateFmt:'yyyy-MM-dd'})" class="Wdate" style="border-width:1px;border-style:solid;border-color:#BFBFBF;height:28px;padding:0 5px;width:150px;"/>
	                </span>
	            </label>
	            <label class="dd_btn">
	                <span>订单状态</span>
	                <span>
		                <select id="state" name="state" style="border-width:1px;border-style:solid;border-color:#BFBFBF;height:30px;padding:0 5px;width:150px;">
							<option value="" label="---请选择---"/>
							<c:forEach var="state" items="${approveEnum}">
								<option value="${state.key}"  <c:if  test="${order.state  eq  state.key}"> selected="selected" </c:if>  >${state.value}</option>
								
							</c:forEach>
						<select>	
	                </span>
	               
	                <span><a class="dd_time_btn" href="#" id="btnQuery">查询</a></span>
	            </label>
	    	</div>
	    	</form>
	    </div>
	   
	   <!-- 订单展示层 -->
	   <div id="orderList">
	    <c:forEach items= "${orderList}" var= "order" varStatus = "status">
		    <div class="trade_order_main" style=" margin-top:10px;border:1px solid #d1f0ff; color:#3c3c3c;">
		    	<div>
		        	<table style="width:100%;border-collapse:collapse;border-spacing:0px;">
		                <colgroup>
		                    <col style="width:30%;"></col>
		                    <col style="width:28%;"></col>
		                    <col style="width:14%;"></col>
		                    <col style="width:10%;"></col>
		                    <col style="width:18%;"></col>
		                </colgroup>
		                <tbody>
		                    <tr style="background-color:#eaf8ff;">
		                        <td style="padding:10px 20px;text-align:left;">
		                            <span>订单号：</span>
		                            <span>${order.orderCode }</span>
		                        </td>
		                        <td style="padding:10px 20px;text-align:left;" >
		                            <span>订单金额：</span>
		                            <span>${order.amount }&nbsp;元</span>
		                        </td>
		                        <td style="padding:10px 20px;text-align:left;" colspan="2">
		                            <span>下单时间：</span>
		                            <span><fmt:formatDate value='${order.createDate}' pattern='yyyy-MM-dd HH:mm:ss'/></span>
		                        </td>
		                        <td style="padding:10px 20px;text-align:right;" >
		                         	<span>订单状态：</span>
		                            <span>${approveEnum[order.state]}</span>
		                        </td>
		                    </tr>
		                </tbody>
		        	</table>
		        	
				    <div class="dd_thead" style="background-color:#f6f6f6;border:1px solid #dcdcdc; margin-top:10px; color:#3c3c3c;">
				    	<table style="width:100%;border-collapse:collapse;border-spacing:0px;">
				        	<tbody>
				            	<tr>
				                	<th style="padding:8px 0;font-weight:400; width:30%;">商品</th>
				                	<th style="padding:8px 0;font-weight:400; width:30%;">规格</th>
				                    <th style="padding:8px 0;font-weight:400; width:12%;">订购数量</th>
				                    <th style="padding:8px 0;font-weight:400; width:12%;">单价</th>
				                    <th style="padding:8px 0;font-weight:400; width:16%;">交易金额</th>
				                </tr>
				            </tbody>
				        </table>
				    </div>	        	
		        	
		        	<!-- 嵌套显示 -->
	        		<c:forEach items="${orderList[status.index].orderDetailList}" var="detail" >  	        	
						<table style="width:100%;border-collapse:collapse;border-spacing:0px;">
			                <colgroup>
			                    <col style="width:30%;"></col>
			                    <col style="width:30%;"></col>
			                    <col style="width:12%;"></col>
			                    <col style="width:12%;"></col>
			                    <col style="width:16%;"></col>
			                </colgroup>
			                <tbody>
				                 <tr>
				                     <td style="text-align:left;vertical-align:top;padding-top:10px;padding-bottom:10px;border-right-width:0;border-right-style:solid;border-right-color:#DAF3FF;border-top-width:0;border-top-style:solid;border-top-color:#DAF3FF;padding-left:20px;">
				                         <div style="overflow:hidden;">
				                         	<a href="#" style="float:left;width:24%;text-align:center;"><img style="border:1px solid #e8e8e8; max-width:70px;" src="${ctxStatic }/images/80x80.png"/></a>
				                             <div style="width:71%;word-wrap:break-word; float:left; margin-left:5%; line-height:20px; padding-top:14px;" >
				                             	<a  class="tb_td_a" href="#"><span>${detail.productions.proName}</span></a>
				                             </div>
				                         </div>
				                     </td>
				                     <td style="padding:10px 20px;text-align:center;border-right-width:0px;border-right-style:solid;border-right-color:#DAF3FF;border-top-width:0;border-top-style:solid;border-top-color:#DAF3FF;">
				                         <p>${detail.productions.etalon}</p>  
				                     </td>			                     
				                     <td style="padding:10px 20px;text-align:center;border-right-width:0px;border-right-style:solid;border-right-color:#DAF3FF;border-top-width:0;border-top-style:solid;border-top-color:#DAF3FF;">
				                         <p>${detail.amount}</p>  
				                     </td>
				                     <td style="padding:10px 20px;text-align:center; border-right-width:1px;border-right-style:solid;border-right-color:#DAF3FF;border-top-width:0;border-top-style:solid;border-top-color:#DAF3FF;">
				                     	<p>${detail.costPrice}</p>
				                     </td>
				                     <td style="padding:10px 20px;text-align:center;border-right-width:1px;border-right-style:solid;border-right-color:#DAF3FF;border-top-width:0;border-top-style:solid;border-top-color:#DAF3FF;">
				                     	<p>${detail.totalPrice}</p>
				                     </td>
				                 </tr>
			                </tbody>
			        	</table>	
			        </c:forEach>
		    	</div>	
		    </div>
	    </c:forEach>
	   </div>
		
	    <div class="order_page">
		   <!-- 分页相关 -->
	       <div id="Pagination" class="pagination" >
				<form id="pageForm" method="post" action="${ctx}/myorder">
					<input type="hidden" id="pageNo" name="pageNo" value="${pageNo}"/>
					<input type="hidden" id="pageSize" name="pageSize" value="${pageSize }"/>
				</form>
	       </div>  	   
		</div>
	</div>
</div>

	<script type="text/javascript">
		$(function(){
			/*
				查询按钮
			 */
			$("#btnQuery").click(function(){
				$("#queryForm").submit();
			});
		
		});
	
	</script>
</body>
</html>